@ts-nocheck
<template>
  <div class="root-container">
    <div class="item-container">
      <h1 class="title-main">
        <div>CDTCC-</div>
        <div class="cell cell1">2</div>
        <div class="cell cell2">K</div>
        <div class="cell cell3">T</div>
      </h1>
      <h2>终端管制室工具箱</h2>
      <div>(ToolKit for CDTCC)</div>
      <!-- <img :src="logo" style="width: 360px; background: transparent" /> -->
      <div class="logo-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <g id="image">
            <g id="item-1" class="arrow arrow1">
              <path
                class="cls-1"
                d="M48.26,212.78c8.26-30.82,66.15-74,77.71-70.93s40.1,69.45,31.83,100.29-39.48,49.25-69.73,41.14S40,243.61,48.26,212.78Z"
              />
              <path
                class="cls-2"
                d="M81.94,316.89a10.32,10.32,0,0,1-2.76-.38,10.66,10.66,0,0,1-7.55-13.06l23.28-86.92a10.67,10.67,0,0,1,20.62,5.52L92.24,309A10.68,10.68,0,0,1,81.94,316.89Z"
              />
            </g>
            <g id="item-2" class="arrow arrow2">
              <path
                class="cls-3"
                d="M339.4,304.45,278.25,323.3,230.11,167.05l61.17-18.84Z"
              />
              <path
                class="cls-4"
                d="M342.25,132.5,179.14,182.75l1.55-67.45L323.4,71.35Z"
              />
            </g>
            <g id="item-3" class="arrow arrow3">
              <path
                class="cls-5"
                d="M466.79,122.38a6.76,6.76,0,0,1,3.39,8.92L411.07,263.12a6.74,6.74,0,0,1-8.92,3.4l-49.23-22.08a6.76,6.76,0,0,1-3.4-8.92l59.1-131.83a6.76,6.76,0,0,1,8.92-3.39Z"
              />
              <path
                class="cls-6"
                d="M382.87,254.25a10.68,10.68,0,0,1-9.73-15L415.39,145a10.66,10.66,0,1,1,19.46,8.72L392.6,247.94a10.64,10.64,0,0,1-9.73,6.31Z"
              />
            </g>
            <g id="basket">
              <path
                class="cls-7"
                d="M42.66,234.67H469.32V448H42.66Zm10.67-128H458.65V128H53.33Z"
              />
              <path
                class="cls-8"
                d="M128,320H64a10.67,10.67,0,1,1,0-21.33h64A10.67,10.67,0,0,1,128,320Zm320-21.33H405.32a10.67,10.67,0,1,1,0-21.33H448A10.65,10.65,0,0,1,458.65,288h0A10.65,10.65,0,0,1,448,298.67ZM85.33,405.34H64A10.67,10.67,0,0,1,64,384H85.33a10.67,10.67,0,1,1,0,21.34ZM448,394.67H373.32c-27.18,0-40.84,14.64-47.51,26.9a65.05,65.05,0,0,0-7.56,25.95V448h21.36a45.21,45.21,0,0,1,5.25-16.78C350.65,421,360,416,373.32,416H448a10.67,10.67,0,0,0,0-21.33Z"
              />
              <path class="cls-9" d="M0,64H64V448H0Zm448,0h64V448H448Z" />
            </g>
          </g>
          <g id="atmb">
            <polygon
              class="cls-10"
              points="244.13 247.97 187.44 434.69 219.88 434.69 260.5 301.63 301.79 434.69 333.95 434.69 277.33 247.97 244.13 247.97"
            />
            <path
              class="cls-11"
              d="M289.29,275.17s8.25,3.71,10.79,5c1.63.83,5.92,3.57,5.92,3.57a438.4,438.4,0,0,0-53.65,29.33c-26.48,17.18-52.89,39.74-60,55.37-11.21,24.41,4.49,35.38,4.49,35.38l11.43-37.16s1.3-6.28,14.48-18.94c5.82-5.57,26-22.3,39.65-31.36,18-12,45.29-28.58,45.29-28.58L310,300.22s7.76-15,11.8-18.77c2.5-2.35,11.53-6.27,11.42-7.66-.33-4.4-17.22,4-17.22,4Z"
            />
            <path
              class="cls-11"
              d="M232.51,393.32s4,.39,12-2.45c7.43-2.64,11.7-7,16-10.24l16.64,12.69s-18.3,10.65-24.81,13.25c-14.82,5.9-25.67,5.9-25.67,5.9Z"
            />
          </g>
        </svg>
      </div>
    </div>
    <!-- <div style="max-width: 800px">
      <v-md-preview :text="md"></v-md-preview>
    </div> -->
  </div>
</template>

<script setup>
// import logo from "@/assets/images/logo.svg";
// export default {
//   data() {
//     return {
//       md: "# About",
//       options: {},
//     };
//   },
//   mounted() {
//     this.axios.get("./docs/About.md").then((res) => {
//       this.md = res.data;
//     });
//   },
// };
</script>

<style scoped>
* {
  text-align: center;
  background: transparent;
  background-color: transparent;
}
.root-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 48px 24px;
}

.item-container > * {
  margin-bottom: 12px;
}

.title-main {
  display: inline-flex;
}

.cell {
  animation-name: beat-cell;
  /*动画名称*/
  animation-duration: 2s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

.cell1 {
  animation-delay: 0ms;
}

.cell2 {
  animation-delay: 250ms;
}

.cell3 {
  animation-delay: 500ms;
}

@keyframes beat-cell {
  0% {
    transform: translateX(0px);
  }
  2% {
    transform: translateX(2px);
  }
  4% {
    transform: translateX(-2px);
  }
  6% {
    transform: translateX(2px);
  }
  8% {
    transform: translateX(-2px);
  }
  10% {
    transform: translateX(2px);
  }
  12% {
    transform: translateX(-2px);
  }
  14% {
    transform: translateX(2px);
  }
  16% {
    transform: translateX(-2px);
  }
  18% {
    transform: translateX(2px);
  }
  20% {
    transform: translateX(-2px);
  }
  22% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(2px);
  }
}

.logo-container {
  margin-top: 24px;
  width: calc(50vw - 200px);
  max-width: 300px;
  min-width: 120px;
  cursor: pointer;
  transition: all 1.5s ease;
  /* padding: 18px;
  border-radius: 24px;
  border: 2px solid rgba(128, 128, 128, 0);
  background-color: transparent; */
}

.logo-container:hover {
  /* border-color: rgba(128, 128, 128, 0.2);
  background-color: rgba(128, 128, 128, 0.1); */
}

.logo-container > * {
  transition: all 1.5s ease;
}

.logo-container:hover > * {
  transform: rotate(22deg) scale(0.85);
}

@keyframes border {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: rgba(128, 128, 128, 0.25);
  }
}

.arrow {
  animation-name: beat;
  /*动画名称*/
  animation-duration: 0.8s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}
.arrow1 {
  animation-delay: 0ms;
}
.arrow2 {
  animation-delay: 250ms;
}
.arrow3 {
  animation-delay: 500ms;
}

@keyframes beat {
  0% {
    transform: translateY(8px);
  }
  90% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(-8px);
  }
}

.cls-1 {
  fill: #e6e9ed;
}
.cls-2 {
  fill: #ccd1d9;
}
.cls-3 {
  fill: #ed5564;
}
.cls-4 {
  fill: #434a54;
}
.cls-5 {
  fill: #a0d468;
}
.cls-6 {
  fill: #8cc153;
}
.cls-7 {
  fill: #f6bb42;
}
.cls-8 {
  fill: #dba037;
}
.cls-9 {
  fill: #ffce54;
}
.cls-10 {
  fill: #0071bc;
}
.cls-11 {
  fill: gray;
}
</style>
